<!--
 * @Descripttion: 
 * @version: 
 * @Author: wtzhang
 * @Date: 2021-06-02 13:16:50
 * @LastEditors: wtzhang
 * @LastEditTime: 2021-06-02 14:07:41
-->
{{extend '../_layouts/home.html'}}

{{block 'head'}}
<link rel="stylesheet" href="/public/css/markdown-github.css">
<style>
  .panel .panel-heading .action i {
    margin-right: 10px;
  }
  .container {
    padding-top: 80px;
  }
  .form-control {
    width: 30%;
    height: 34px;
    display: block;
    position: initial;
    margin: 0;
    transform: none;
    font-size: 13px;
    color: #9e9e9e;
  }
</style>
{{/block}}

{{block 'body'}}
<section class="container">
  <div class="row">
    <div class="col-md-9">
      <article class="markdown-body">
      <h1 id="_1">{{topic.title}}</h1>
      <blockquote>
        <p>{{topic.nickname}}</p>
      </blockquote>
      <p id="_2">{{topic.article}}</p>
      </article>
      {{if comments}}
      {{each comments item i}}
      <div class="panel panel-default">
        <div class="panel-heading">
          <span>{{item.nickname}}</span> 评论于
          <span>{{item.created_time | getDate}}</span>
          <span class="action">
            <a href=""><i class="glyphicon glyphicon-thumbs-up pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
          </span>
        </div>
        <div class="panel-body">
          {{item.comments}}
        </div>
      </div>
      <br>
      {{/each}}
      {{ else }}
      <p>还没有评论，快来抢占沙发吧！</p>
      {{/if}}
    <hr>
    <form id="comments_form">
      <div class="form-group">
        <label for="">发表评论</label>
        <textarea class="form-control" cols="10" rows="5" name="comments"></textarea>
      </div>
      <button type="submit" class="btn btn-success">评论</button>
    </form>
   </div>
  </div>
</section>
{{/block}}
{{block 'script'}}
<script>
  $("#comments_form").on('submit',e => {
    e.preventDefault()
    if ($("textarea").val() === ''){
      window.alert("还没有输入内容！")
      return false
    }
    const id = $(this)[0].location.search.slice(4).replace(/\"/g,"")
    const formData = $("#comments_form").serialize()
    $.ajax({
      url: "/topics/show",
      type: "post",
      data: formData+"&articleId="+id,
      dataType: 'json',
      success: data => {
        const err_code = data.err_code
        if (err_code === 0){
          window.location.href='/topics/show?id='+id
        } else if (err_code === -1) {
          window.alert(data.message)
        } else if (err_code === 500){
          window.alert('服务器忙，请稍后重试！')
        }
      }
    })
  })
</script>
{{/block}}
